<template>
  <view class="gg-column">
    <view
      class="column"
      v-for="(item, i) in columnList"
      :key="i"
      :style="{
        height,
        background: stripe ? (i % 2 ? tableData.backgrounds : '') : '',
        color:tableData.colors,
      }"
    >
      <vlew class="slotview" :style="{ width: widths,padding }">
        <slot :scope="{ row: tabList[i], $index: i }">
          {{ item }}
        </slot>
      </vlew>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  inject,
  computed,
  getCurrentInstance,
  unref,
  toRefs,
  reactive,
} from "vue";
const { proxy } = getCurrentInstance() as any;
const $rpxunit = proxy.$rpxunit;
let props = defineProps({
  prop: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "",
  },
});

let tableData = inject("tableData") as any;

let state = reactive({
  columnList: [],
});
let { columnList } = toRefs(state);

let padding = computed(() => {
  return tableData.padding;
});
let height = computed(() => {
  return tableData.height;
});
const widths = computed(() => {
  return $rpxunit(props.width);
});
let tabList: any = computed(() => {
  return tableData.list;
});
let stripe = computed(() => {
  return tableData.stripe;
});

state.columnList = tabList.value.map((v: any) => {
  return v[props.prop];
});
</script>

<style lang="scss" scoped>
.gg-column {
  width: 100%;
  .column {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    // border-right: 2rpx solid #F8F8F8;
    border-bottom: $uni-border;
    .slotview {
      box-sizing: border-box;
      text-align: center;
      width:100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  // .column:nth-child(2n){
  // 	background: #F8F8F8;
  // }
  .column:nth-last-child(1) {
    border-bottom: none;
  }
}
</style>